<template>
    <div class="video-list-item" @click="toVideoDetail">
        <div class="item-img" @mouseover="isShowPlay = true" @mouseleave="isShowPlay = false">
            <div class="video-img">
                <img v-lazy="video.coverUrl" alt="" width="280" height="200px"/>
            </div>
            <transition name="el-fade-in-linear">
                <div class="mask-playicon" v-show="isShowPlay">
                    <span class="iconfont icon-play"></span>
                </div>
            </transition>
            <transition name="el-zoom-in-top">
                <div class="play-icon" v-show="!isShowPlay">
                    <span class="iconfont icon-play-square"></span>
                    <span>{{video.durationms | formatNum}}</span>
                </div>
            </transition>
            <transition name="el-zoom-in-bottom">
                <div class="playduration" v-show="!isShowPlay">
                    <span>{{video.playTime | formatDuration}}</span>
                </div>
            </transition>
        </div>
        <div class="item-text">
            {{video.title}}
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:{
        video:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    data() {
        return {
            isShowPlay:false
        }
    },
    methods:{
        toVideoDetail(){
            if(this.video.type == 0){
                this.$router.push({
                name:'MvDetail',
                    params:{id:this.video.vid,type:'mv'}
                })
            }else{
                this.$router.push({
                name:'VideoDetail',
                    params:{id:this.video.vid,type:'video'}
                })
            }
        }
    },
    created(){
        
    },
}
</script>
<style lang="less" scoped>
    .video-list-item{
        width: 277px;
        height: 230px;
        margin: 10px 10px;
        .item-img{  
            position: relative;
            .video-img{
                width: 280px;
                height: 200px;
                img{
                    width: 100%;
                    height: 100%;
                }

            }
            .mask-playicon{
                width: 280px;
                height: 200px;
            }
            .play-icon{
                position: absolute;
                top: 2px;
                right: 2px;
                color: #fff;
            }
            .playduration{
                position: absolute;
                bottom: 2px;
                left: 2px;
                color: #fff;
                height: 30px;
                line-height: 30px;
                background: rgba(100, 100, 100, 0.5);
            }
            
        }
        .item-text{
            margin: 5px 3px;
        }
    }
</style>